<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="utf-8">
    <title>W3Cschool教程(w3cschool.cn)</title>
    <style>
        div {
            margin: 0 auto;
            width: 100px;
            height: 100px;
            background: red;
            position: relative;
            animation: myfirst 5s;
        }
        
        @keyframes myfirst {
            /* 定义关键帧keyframs的名字  myfirst */
            0% {
                background: red;
                left: 0px;
                top: 0px;
            }
            25% {
                background: yellow;
                left: 200px;
                top: 0px;
            }
            50% {
                background: blue;
                left: 200px;
                top: 200px;
            }
            75% {
                background: green;
                left: 0px;
                top: 200px;
            }
            100% {
                background: red;
                left: 0px;
                top: 0px;
            }
            /*用百分比来规定变化发生的时间，或用关键词 "from" 和 "to"，等同于 0% 和 100%。0% 是动画的开始，100% 是动画的完成。对于百分比无特殊要求,作用在于先后排序*/
        }
    </style>
</head>

<body>
    <div></div>

</body>

</html>